<!--
 * @Author: your name
 * @Date: 2021-08-02 05:03:43
 * @LastEditTime: 2021-09-06 16:37:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \aircityinit\src\components\Header\header.vue
-->
<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInLeft"
    leave-active-class="animated fadeOutLeft"
  >
    <div class="header" v-show="ll">
      <!-- <button @click="pushtoview1">跳转子路由1</button>
      <button @click="pushtoview2">跳转子路由2</button> -->
      <!-- 时间 -->

      {{ time }}----{{ riqi }}
      <!-- 天气 -->
      <div class="weather">
        <div id="he-plugin-simple"></div>
      </div>
      
    </div>
  </transition>
</template>

<script>
// 引入公共
import { mapState, mapMutations, mapActions } from "vuex";
import dayjs from "dayjs";
export default {
  data() {
    return {
      ll: false,
      time: "15:00:00",
      riqi: "2021:11:16",
    };
  },
  computed: {
    // 引入公共的home的公共
    ...mapState("home", ["text"]),
  },
  watch: {},
  methods: {
    // 引用方法
    ...mapMutations({
      settext_act: "home/settext_act",
    }),
    // 获取时间
    gettime() {
      this.timer = setInterval(() => {
        this.time = dayjs().format("HH:mm:ss");
        this.riqi = dayjs().format("YYYY-MM-DD");
      }, 1000);
    },

    pushtoview1() {
      console.log(11);

      this.$router.push({ path: "/home/mockc" });
    },
    pushtoview2() {
      console.log(2);
      this.$router.push({ path: "/home/mock1" });
    },
  },
  created() {
    console.log(this.text);
    this.gettime();
  },
  mounted() {
    setTimeout(() => {
      this.ll = true;
    }, 1000);

    // 获取天气
    window.WIDGET = {
      CONFIG: {
        modules: "02",
        background: "4",
        tmpColor: "FFFFFF",
        backgroundColor: "#00000000",
        tmpSize: "20",
        cityColor: "FFFFFF",
        citySize: "20",
        aqiColor: "FFFFFF",
        aqiSize: "20",
        weatherIconSize: "30",
        alertIconSize: "18",
        padding: "10px 10px 10px 10px",
        shadow: "1",
        language: "zh",
        borderRadius: "10",
        fixed: "false",
        vertical: "top",
        horizontal: "left",
        key: "8f0727ee21004600b2a5826ffc63a5f9",
      },
    };
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src =
      "https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
    document.getElementsByTagName("head")[0].appendChild(script);
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {},
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 90px;
  background: rgba(0, 0, 0, 0.466);
  position: absolute;
  text-align: center;
  font-weight: 900;
  line-height: 90px;
  z-index: 100;
  display: flex;
}
</style>
